<template>
  <el-dialog
    top="10vh"
    width="500px"
    title="添加/编辑"
    :visible.sync="dialogValue"
    :close-on-click-modal="false"
    append-to-body
  >
    <SubmitForm
      :rule-form="ruleForm"
      :rules="rules"
      :form-list="formList"
      @change="handleFormChange"
      @save="onSave"
      @close="dialogValue = false"
    />

  </el-dialog>
</template>

<script>
import { http } from '@/api'
import getLangForm from "@/utils/langForm";
export default {
  name: 'FormAdd',
  data() {
    return {
      apiKey: 'device',
      dialogValue: false,
      ruleForm: {
      },
      defaultForm: {
        type: 'network',
        name: '',
        number: '',
        department_id: 0,
        manager_id: 0,
        build_department_id: 0,
        project: '',
        purpose: '',
        location: '',
        integrator: '',
        count: '',
        buy_time: '',
        warranty: '',
        maintain_cycle: 'week',
        status: '',
        stop_time: '',
        stop_reason: '',
        firmware: '',
        module: '',
        port_type: '',
        os_type: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入设备/备件名称', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请选择管理部门', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择管理人', trigger: 'blur' }
        ],
        project: [
          { required: true, message: '请输入工程项目名称', trigger: 'blur' }
        ],
      },
      formList: [
        /**
         * 设备/备件名称：		类型：（网络设备/硬件设备/备件）		设备编号：
         * 管理部门：（可引用部门信息）		管理人：（可引用部门人员信息）		工程项目名称：
         * 用途：		安装位置：		集成商：
         * 数量：		购买时间：		质保期：
         * 维护周期：    周      月
         * 使用情况：    在用    停用时间：    年   月   日。   停用原因：
         * （如类型中选择“网络设备”，自动出现如下信息待填写
         * 固件版本：		设备模块：	端口类型：
         * 操作系统类型：
         */
        // 转化为填报字段
        {
          label: '类型',
          key: 'type',
          name: 'select',
          colSpan: 8,
          options: [
            {
              label: '网络设备',
              value: 'network'
            },
            {
              label: '硬件设备',
              value: 'hardware'
            },
            {
              label: '备件',
              value: 'spare'
            }
          ]
        },
        {
          label: '设备/备件名称',
          key: 'name',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '数量',
          key: 'count',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '设备编号',
          key: 'number',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '管理部门',
          key: 'department_id',
          name: 'select',
          colSpan: 8,
          options:[],
        },
        {
          label: '管理人',
          key: 'manager_id',
          name: 'select',
          colSpan: 8,
          options:[],
        },
        {
          label: '承建部门',
          key: 'build_department_id',
          name: 'select',
          colSpan: 8,
          options:[],
        },
        {
          label: '工程项目名称',
          key: 'project',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '用途',
          key: 'purpose',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '安装位置',
          key: 'location',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '集成商',
          key: 'integrator',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '购买时间',
          key: 'buy_time',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '质保期',
          key: 'warranty',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '维护周期',
          key: 'maintain_cycle',
          name: 'select',
          colSpan: 8,
          // 周、月
          options: [
            {
              label: '周',
              value: 'week'
            },
            {
              label: '月',
              value: 'month'
            }
          ]
        },
        {
          label: '使用情况',
          key: 'status',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '停用时间',
          key: 'stop_time',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '停用原因',
          key: 'stop_reason',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '固件版本',
          key: 'firmware',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '设备模块',
          key: 'module',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '端口类型',
          key: 'port_type',
          name: 'input',
          colSpan: 8,
        },
        {
          label: '操作系统类型',
          key: 'os_type',
          name: 'input',
          colSpan: 8,
        }
      ]
    }
  },
  methods: {
    handleFormChange({ key, val }) {

    },
    open(row) {
      this.dialogValue = true
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data
          }
        })
      } else {
        this.ruleForm = {
          ...this.defaultForm
        }
      }
    },
    onSave() {
      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, { ...this.ruleForm }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
